<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p class="p1" title="jq的使用" qwer="df">jquery控制标签属性-prop attr</p>
    <input class="input1" type="text">
    <input class="check1" type="checkbox">
    <input class="radio1" type="radio">
    <script src="./jquery.min.js"></script>
    <script>
        // 加上这个$function的目的是延后js的加载 保证先加载html和css
        // 完整写法是$(document).ready(func...) document加载成功后 才会加载js 优化代码加载顺序
        $(function () {

            // 猜测中jq选择器的源码。。。
            // function $(selector) {
            //     return document.querySelector(selector)
            // }

            var p1 = $('.p1')
            var input1 = $('.input1')
            var check1 = $('.check1')
            var radio1 = $('.radio1')
            // 获取+设置=控制
            // 获取属性值
            console.log(p1.prop('title'));
            console.log(input1.prop('type'));
            // 修改属性值
            p1.prop('title', '还是vue好哇')
            input1.prop('type', 'password')
            // =========
            console.log(p1.attr('qwer'));
            // 获取单选多选的选中状态
            // check1.prop('checked')
            // radio1.prop('checked')
            // 设置单选多选的选中状态
            // check1.prop('checked', 布尔值)
            // radio1.prop('checked', 布尔值)

            // 全选  要分成两个函数来写 一个控制全部 一个控制单个选项

            // 事件委托 $(function(){})  代码执行顺序

        })
    </script>
</body>

</html>